<template>
  <div class="graph-search">
    <div class="search-container">
      <div class="search-inputs">
        <el-form :model="searchForm" label-width="120px">
          <el-form-item label="起始节点">
            <el-select
              v-model="searchForm.startNode"
              filterable
              placeholder="请选择起始节点"
              class="search-input"
            >
              <el-option
                v-for="item in companies"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目标节点">
            <el-select
              v-model="searchForm.endNode"
              filterable
              placeholder="请选择目标节点"
              class="search-input"
            >
              <el-option
                v-for="item in companies"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchPath">开始分析</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="showResult" class="result-container">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="风险传导分析" name="risk">
            <div class="analysis-content">
              <div class="graph-container">
                <div ref="riskGraph" class="graph"></div>
              </div>
              <div class="analysis-info">
                <h3>风险传导分析结果</h3>
                <el-card class="risk-card">
                  <div v-for="(risk, index) in riskAnalysis" :key="index" class="risk-item">
                    <el-tag :type="risk.level">{{ risk.type }}</el-tag>
                    <span>{{ risk.description }}</span>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="供应链路分析" name="path">
            <div class="analysis-content">
              <div class="graph-container">
                <div ref="pathGraph" class="graph"></div>
              </div>
              <div class="analysis-info">
                <h3>供应链路分析结果</h3>
                <el-card class="path-card">
                  <div v-for="(path, index) in pathAnalysis" :key="index" class="path-item">
                    <div class="path-header">链路 {{ index + 1 }}</div>
                    <div class="path-content">{{ path.description }}</div>
                    <div class="path-metrics">
                      <el-tag size="small">长度: {{ path.length }}</el-tag>
                      <el-tag size="small" type="success">可靠度: {{ path.reliability }}</el-tag>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'GraphSearch',
  data() {
    return {
      searchForm: {
        startNode: '',
        endNode: ''
      },
      companies: [
        { value: 'company1', label: '华为技术有限公司' },
        { value: 'company2', label: '中芯国际集成电路制造有限公司' },
        { value: 'company3', label: '智能芯片' },
        { value: 'company4', label: '台积电股份有限公司' },
        { value: 'company5', label: '高通公司' }
      ],
      showResult: false,
      activeTab: 'risk',
      riskAnalysis: [],
      pathAnalysis: [],
      riskChart: null,
      pathChart: null
    }
  },
  methods: {
    searchPath() {
      if (!this.searchForm.startNode || !this.searchForm.endNode) {
        this.$message.warning('请选择起始和目标企业')
        return
      }
      this.showResult = true
      this.$nextTick(() => {
        this.initCharts()
        this.generateMockData()
      })
    },
    initCharts() {
      // 初始化风险传导图和供应链路图
      this.riskChart = echarts.init(this.$refs.riskGraph)
      this.pathChart = echarts.init(this.$refs.pathGraph)

      // 风险传导图配置
      const riskOption = {
        tooltip: {
          formatter: '{b}'
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          type: 'graph',
          layout: 'circular',
          symbolSize: 50,
          roam: true,  // 禁用缩放和拖拽
          center: ['50%', '50%'],
          zoom: 1,      // 固定缩放比例
          label: {
            show: true,
            position: 'right',
            formatter: '{b}',
            fontSize: 12
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 12,
            formatter: '供应'

          },
          data: [
            {
              name: '华为技术有限公司',
              itemStyle: {
                color: '#FF6B6B'
              }
            },
            {
              name: '中芯国际集成电路制造有限公司',
              itemStyle: {
                color: '#4ECDC4'
              }
            },
            {
              name: '联发科技股份有限公司',
              itemStyle: {
                color: '#45B7D1'
              }
            },
            {
              name: '供应商A',
              itemStyle: {
                color: '#96CEB4'
              }
            },
            {
              name: '供应商B',
              itemStyle: {
                color: '#FFEEAD'
              }
            }
          ],
          links: [
            {
              source: '华为技术有限公司',
              target: '中芯国际集成电路制造有限公司',
              lineStyle: {
                color: '#F76D57',
                width: 2
              }
            },
            {
              source: '中芯国际集成电路制造有限公司',
              target: '联发科技股份有限公司',
              lineStyle: {
                color: '#87D37C',
                width: 2
              }
            },
            {
              source: '联发科技股份有限公司',
              target: '供应商A',
              lineStyle: {
                color: '#00B16A',
                width: 2
              }
            },
            {
              source: '供应商A',
              target: '供应商B',
              lineStyle: {
                color: '#4183D7',
                width: 2
              }
            }
          ],
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0
          }
        }]
      }

      // 供应链路图配置
      const pathOption = {
        tooltip: {
          formatter: '{b}'
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          type: 'graph',
          layout: 'force',
          symbolSize: 50,
          roam: false,  // 禁用缩放和拖拽
          center: ['50%', '50%'],
          zoom: 1,      // 固定缩放比例
          label: {
            show: true,
            position: 'right',
            formatter: '{b}',
            fontSize: 12
          },
          force: {
            repulsion: 200,    // 减小斥力
            gravity: 0.2,      // 增加引力
            edgeLength: 150,   // 减小边长度
            layoutAnimation: true
          },
          data: [
            {
              name: '华为技术有限公司',
              itemStyle: {
                color: '#5C97BF'
              }
            },
            {
              name: '中芯国际集成电路制造有限公司',
              itemStyle: {
                color: '#59ABE3'
              }
            },
            {
              name: '联发科技股份有限公司',
              itemStyle: {
                color: '#4B77BE'
              }
            },
            {
              name: '供应商A',
              itemStyle: {
                color: '#33495F'
              }
            },
            {
              name: '供应商B',
              itemStyle: {
                color: '#2E4053'
              }
            }
          ],
          links: [
            {
              source: '华为技术有限公司',
              target: '中芯国际集成电路制造有限公司',
              lineStyle: {
                color: '#E4F1FE',
                width: 3
              }
            },
            {
              source: '中芯国际集成电路制造有限公司',
              target: '联发科技股份有限公司',
              lineStyle: {
                color: '#E4F1FE',
                width: 3
              }
            },
            {
              source: '联发科技股份有限公司',
              target: '供应商A',
              lineStyle: {
                color: '#E4F1FE',
                width: 3
              }
            },
            {
              source: '供应商A',
              target: '供应商B',
              lineStyle: {
                color: '#E4F1FE',
                width: 3
              }
            }
          ],
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0.1
          }
        }]
      }

      // 设置图表选项
      this.riskChart.setOption(riskOption)
      this.pathChart.setOption(pathOption)
    },
    generateMockData() {
      // 模拟风险分析数据
      this.riskAnalysis = [
        {
          type: '供应链断裂风险',
          level: 'danger',
          description: '存在关键节点依赖，断裂风险较高'
        },
        {
          type: '质量风险',
          level: 'warning',
          description: '原材料质量波动可能影响产品稳定性'
        },
        {
          type: '时间风险',
          level: 'info',
          description: '运输时间可能受天气影响产生波动'
        }
      ]

      // 模拟路径分析数据
      this.pathAnalysis = [
        {
          description: '华为 -> 中芯国际 -> 联发科 -> 供应商A',
          length: 4,
          reliability: '87%'
        },
        {
          description: '华为 -> 联发科 -> 供应商B',
          length: 3,
          reliability: '92%'
        }
      ]
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeCharts)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCharts)
    if (this.riskChart) {
      this.riskChart.dispose();
    }
    if (this.pathChart) {
      this.pathChart.dispose();
    }
  },
  watch: {

    activeTab: {
      handler(newTab) {
        this.$nextTick(() => {
          setTimeout(() => {
            if (newTab === 'risk' && this.riskChart) {
              this.riskChart.resize();
            } else if (newTab === 'path' && this.pathChart) {
              this.pathChart.resize();
            }
          }, 100);
        });
      }
    }
  }
}
</script>
<style scoped>
.graph-search {
  padding: 20px;
  height: calc(100vh - 100px);
  background-color: #fff;
}

.search-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.search-inputs {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  flex-shrink: 0;  /* 防止搜索区域被压缩 */
}

.result-container {
  margin-top: 20px;
  flex: 1;
  min-height: 0;  /* 重要：允许内容区域压缩 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.el-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;  /* 重要：允许标签页内容压缩 */
}

:deep(.el-tabs__content) {
  flex: 1;
  overflow: auto;
  min-height: 0;  /* 重要：允许内容区域压缩 */
}

:deep(.el-tab-pane) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.analysis-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 20px;
}

.graph-container {
  height: 500px;
  margin: 20px auto;
  width: 90%;
  max-width: 1200px;
  flex-shrink: 0;  /* 防止图表区域被压缩 */
  position: relative;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.search-input {
  width: 100%;
}

.result-container {
  margin-top: 20px;
  padding: 0 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.graph-container {
  height: 500px;
  margin: 20px auto;
  width: 90%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;  /* 添加定位上下文 */
}

.graph {
  width: 100%;
  height: 100%;
  position: absolute;  /* 绝对定位 */
  left: 0;
  top: 0;
}

.analysis-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.analysis-info {
  width: 90%;
  max-width: 1200px;
  margin: 20px auto 0;
}

.analysis-info h3 {
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.risk-card, .path-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  width: 100%;
}

.el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.el-tabs__content) {
  flex-grow: 1;
  overflow: auto;
}

:deep(.el-tab-pane) {
  height: 100%;
  overflow: auto;
}

.risk-item, .path-item {
  margin-bottom: 15px;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.risk-item:last-child, .path-item:last-child {
  border-bottom: none;
}

.path-header {
  font-weight: bold;
  margin-bottom: 10px;
}

.path-metrics {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.risk-item .el-tag {
  margin-right: 10px;
}

@media (max-width: 768px) {
  .graph-container {
    height: 300px;
  }

  .search-inputs {
    padding: 10px;
  }

  .analysis-content {
    padding: 10px;
  }
}
</style>
